<template>
  <el-container>
    <el-header style="display: flex; justify-content: space-between; height: 45px;">
      <div style="display: flex; flex-wrap: wrap; align-items: center; margin: 0px; padding: 0px;">
        <div class="rightBorderDiv" style="display: flex; align-items: center;">
          <el-link icon="el-icon-user" :underline="false" @click="addDo">新增</el-link>
        </div>
        <div class="rightBorderDiv2" style="display: flex; align-items: center; margin-left: 20px;">
          <el-link icon="el-icon-delete" :underline="false" @click="isDelect(multipleSelection)" :disabled="this.multipleSelection.length === 0">批量删除</el-link>
        </div>
      </div>
      <div style="display: flex; flex-wrap: wrap; align-items: center; margin: 0px; padding: 0px; padding-right: 10px;">
        <el-input placeholder="请输入你要搜索的客户名称" v-model="input" size="small" style="width: 200px;font-size: 14px;"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchDo(input)" v-model="input">搜索</el-button>
      </div>
    </el-header>

    <el-main style="margin: 0px; padding: 0px;">
      <el-dialog title="编辑信息" :visible.sync="dialogAdd" width="30%" :before-close="handleClose">
        <el-form :model="addCusInfo" label-width="130px" min-height="150px" label-position="right" size="small" :rules="rules"
          ref="addCusInfo">
          <el-form-item label="客户编号" required>
            <el-col :span="13">
              <el-input v-model="addCusInfo.no" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客户名称" required prop="name">
            <el-col :span="13">
              <el-input v-model="addCusInfo.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客户等级" required>
            <el-col :span="13">
              <el-input v-model="addCusInfo.level" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="上次登录时间" required prop="lasttime">
            <el-col :span="13">
              <el-date-picker type="date" placeholder="选择日期" v-model="addCusInfo.lasttime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="未登录时长" required>
            <el-col :span="13">
              <el-input v-model="addCusInfo.nowtime" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="采取措施" required prop="event">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="addCusInfo.event"></el-input>
          </el-form-item>
          <el-form-item label="状态" required prop="state">
            <el-col :span="13">
              <el-select v-model="addCusInfo.state" placeholder="请选择状态">
                <el-option label="未处理" value="未处理"></el-option>
                <el-option label="暂缓流失" value="暂缓流失"></el-option>
                <el-option label="确认流失" value="确认流失"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editDo">确 定</el-button>
          <el-button @click="cancel('addCusInfo')">取 消</el-button>
        </div>
      </el-dialog>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
        style="border-top: 2px solid;border-top-color:#6299FF; width: 100%">
        <el-table-column type="selection" width="55px">
        </el-table-column>
        <el-table-column prop="no" label="客户编号" min-width="50px">
        </el-table-column>
        <el-table-column prop="name" label="客户名称" min-width="100px">
        </el-table-column>
        <el-table-column prop="level" label="客户等级" min-width="100px">
        </el-table-column>
        <el-table-column prop="lasttime" label="上次登录时间" min-width="100px">
        </el-table-column>
        <el-table-column prop="nowtime" label="未登录时长" min-width="100px">
        </el-table-column>
        <el-table-column prop="event" label="采取措施" min-width="100px">
        </el-table-column>
        <el-table-column prop="state" label="状态" min-width="100px">
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-link icon="el-icon-edit" :underline="false" @click="updateDo(scope.$index, scope.row)">编辑</el-link>
          </template>Do
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <div class="block">
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize"
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        dialogAdd: false,
        tableData: [],
        multipleSelection: [],
        listTable: [],
        input: '',
        currentPage: 1, //当前页
        pagesize: 5, //每页数量
        total: 0, //总页数
        search: false,
        addCusInfo: {
          no: '',
          name: '',
          level: '普通客户',
          lasttime: '',
          nowtime: '',
          event: '',
          state: '',
        },
        rules: {
          name: [{
            required: true,
            message: '请输入客户名称',
            trigger: 'blur'
          }],
          lasttime: [{
            type: 'date',
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],
          event: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],
          state: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],
        },
      };
    },
    components: {

    },
    mounted() {

    },

    computed: {

    },
    created() {
      this.getdata()
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(val) {
        if (this.search) {
          this.searchDo(this.input);
        } else {
          this.getdata();
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editDo() {
        if (this.addCusInfo.name != "" && this.addCusInfo.sex != "" && this.addCusInfo.phone != "" && this.addCusInfo.address !=
          "" && this.addCusInfo.lasttime != "") {
          if (this.addCusInfo.no != "") {
            this.postRequest('NewCustomer/updateInfo', {
                no: this.addCusInfo.no,
                name: this.addCusInfo.name,
                level: this.addCusInfo.level,
                lasttime: this.addCusInfo.lasttime,
                nowtime: this.addCusInfo.nowtime,
                event: this.addCusInfo.event,
                state: this.addCusInfo.state,
              })
              .then(successResponse => {
                if (successResponse.data.status == 200) {
                  this.search = false;
                  this.$message.success("更改成功！");
                  this.getdata();
                } else
                  this.$message.error(successResponse.data.msg);
              })
              .catch(failResponse => {
                this.$message.error('网络不通畅');
              })
          } else {
            this.postRequest('NewCustomer/insertInfo', {
                no: this.addCusInfo.no,
                name: this.addCusInfo.name,
                level: this.addCusInfo.level,
                lasttime: this.addCusInfo.lasttime,
                nowtime: this.addCusInfo.nowtime,
                event: this.addCusInfo.event,
                state: this.addCusInfo.state,
              })
              .then(successResponse => {
                if (successResponse.data.status == 200) {
                  this.currentPage = 1;
                  this.search = false;
                  this.$message.success("新增成功！");
                  this.getdata();
                } else
                  this.$message.error(successResponse.data.msg);
              })
              .catch(failResponse => {
                this.$message.error('网络不通畅');
              })
          }
          this.dialogAdd = false;
        } else {
          this.$message.warning("输入的值不能为空")
        }
      },
      updateDo: function(index, row) {
        this.dialogAdd = true;
        this.addCusInfo = Object.assign({}, row);
      },
      isDelect() {
        this.listTable = [];
        this.multipleSelection.forEach(item => {
          this.listTable.push(item.no);
        })
        this.$message.success(this.listTable);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getRequest('NewCustomer/muchDel?nos=' + this.listTable)
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.search = false;
                this.currentPage = 1;
                this.$message.success("删除成功!");
                this.getdata()
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addDo() {
        this.addCusInfo.no = "";
        this.addCusInfo.name = "";
        this.addCusInfo.level = "普通客户";
        this.addCusInfo.lasttime = "";
        this.addCusInfo.nowtime = "";
        this.addCusInfo.event = "";
        this.addCusInfo.state = ""
        this.dialogAdd = true;
      },
      getdata() {
        this.getRequest('NewCustomer/getNewPage?beginPage=' + this.currentPage + '&pageSize=' + this.pagesize)
          .then(successResponse => {
            if (successResponse.data.status == 200) {
              // this.getUsersInfo()
              this.tableData = successResponse.data.obj;
              this.total = successResponse.data.totleSize;
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this.dialogAdd = false
      },
      searchDo: function(name) {
        if (this.input != '') {
          this.search = true;
          this.getRequest('NewCustomer/searchName?name=' + this.input + '&beginPage=' + this.currentPage +
              '&pageSize=' +
              this.pagesize)
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                // this.getUsersInfo()
                this.tableData = successResponse.data.obj;
                this.total = successResponse.data.totleSize;
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
        } else {
          this.currentPage = 1;
          this.search = false;
          this.getdata();
        }
      },
    },
  };
</script>

<style>
  .rightBorderDiv {
    height: 15px;
    width: 70px;
    border: 1px solid #c9c9c9;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-top-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
  }

  .rightBorderDiv2 {
    height: 15px;
    width: 100px;
    border: 1px solid #c9c9c9;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-top-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
  }
</style>
